<template>
	<view class="page-container">
		<view class="content">
			<image v-if="detailInfo?.audit=='AUDITED'&&detailInfo?.isRewarded" :src="`${resourcesPath}/image/rewarded.png`" class="audit-image" mode=""></image>
			<image v-if="detailInfo?.audit&&!detailInfo?.isRewarded" :src="`${resourcesPath}/image/${detailInfo?.audit}.png`" class="audit-image" mode=""></image>
			<view class="info-section">
				<view style="height: 70rpx;line-height: 70rpx;border-bottom: solid 1px #eee;margin-bottom: 10rpx;">基本信息</view>
				<view class="date-time" v-if="detailInfo?.createTime">
					上传时间：<text class="date">{{dayjs(detailInfo?.createTime).format('YYYY-MM-DD HH:mm')}}</text>
					
				</view>
				<view class="" style="margin-bottom: 10rpx;" v-if="detailInfo?.auditTime">
					审核时间：{{dayjs(detailInfo?.auditTime).format('YYYY-MM-DD HH:mm')}}
				</view>
				<view v-if="detailInfo?.settleTime&&detailInfo?.isRewarded">
					发放时间：{{dayjs(detailInfo?.settleTime)}}
				</view>
				<view style="margin-bottom: 10rpx;" v-if="detailInfo?.isRewarded">
					奖励金额：{{detailInfo?.auditPrize}}
				</view>
				<view class="location">
					<!-- <text class="district">{{detailInfo?.subdistrict}}</text> -->
					<view class="address">
						<uni-icons custom-prefix="iconfont" type="location" size="16" color="#666666"></uni-icons>
						<text class="address-text">{{detailInfo?.street}}</text>
					</view>
				</view>
				<view class="tags">
					<text class="tag tag-blue">{{detailInfo?.posterType}}</text>
					<!-- <text class="tag tag-orange">野广告</text> -->
				</view>
			</view>

			<view class="image-comparison">
				<view class="image-section">
					<text class="image-title">处理前</text>
					<image class="comparison-image" :src="`${imagePath}/images/${detailInfo?.beforePhoto}`" mode="widthFix"></image>
				</view>
				<view class="image-section">
					<text class="image-title">处理后</text>
					<image class="comparison-image" :src="`${imagePath}/images/${detailInfo?.afterPhoto}`" mode="widthFix"></image>
				</view>
			</view>

			<view class="detail-section">
				<view class="detail-item">
					<text class="label">处理人员</text>
					<text class="value">{{detailInfo?.creatorUserName}}</text>
				</view>
				<view class="detail-item">
					<text class="label">处理时长</text>
					<text class="value">3分钟</text>
				</view>
			</view>

			<view class="remark-section">
				<text class="remark-title">处理备注</text>
				<text class="remark-content">{{detailInfo.remark}}</text>
			</view>
			
			<view class="remark-section" style="margin-top: 20px;" v-if="detailInfo.auditConclusion">
				<text class="remark-title">审核结论</text>
				<text class="remark-content" style="color: #ff0000;">{{detailInfo.auditConclusion}}</text>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {imagePath,resourcesPath} from '@/config/common.js'
	import dayjs from '@/utils/dayjs.main.js'
	import { onMounted, ref } from 'vue';
	import {onLoad} from'@dcloudio/uni-app'
	import { request } from "@/utils/api";
	const beforImg = resourcesPath + '/image/beforImg.jpg'
	const afterImg = resourcesPath + '/image/afterImg.jpg'
	const detailInfo = ref<PosterItem>({})
	const getDetail = (id:string)=>{
		request({
			url: `/sanitation/v1/posters/${id}`,
			method: 'GET',
		}).then(res => {
			detailInfo.value = res
		})
	}
	onMounted(()=>{
		
	})
	onLoad((options)=>{

		getDetail(options.id)
	})
</script>

<style scoped lang="scss">
	page {
		height: 100%;
		background-color: #f5f5f5;
	}

	.page-container {
		min-height: 100%;
		padding: 0 30rpx;
		box-sizing: border-box;
		background-color: #f5f5f5;
	}

	.content {
		padding: 20rpx 0;
		position: relative;
		.audit-image{
			width: 140rpx;
			height: 140rpx;
			position: absolute;
			top: 70rpx;
			right: 24rpx;
		}
	}

	.info-section {
		background-color: #ffffff;
		border-radius: 0.75rem;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}

	.date-time {
		margin-bottom: 20rpx;
	}

	.date {
		font-size: 16px;
		color: #333333;
		margin-right: 20rpx;
	}

	.time {
		font-size: 14px;
		color: #666666;
	}

	.location {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.district {
		font-size: 14px;
		color: #666666;
	}

	.address {
		display: flex;
		align-items: center;
		flex: 1;
		// margin-left: 20rpx;
	}

	.address-text {
		font-size: 14px;
		color: #666666;
		margin-left: 8rpx;
	}

	.tags {
		display: flex;
		gap: 16rpx;
	}

	.tag {
		padding: 4rpx 16rpx;
		border-radius: 4rpx;
		font-size: 12px;
	}

	.tag-blue {
		background-color: #e6f4ff;
		color: #1677ff;
	}

	.tag-orange {
		background-color: #fff7e6;
		color: #fa8c16;
	}

	.image-comparison {
		background-color: #ffffff;
		border-radius: 0.75rem;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}

	.image-section {
		margin-bottom: 30rpx;
	}

	.image-title {
		display: block;
		font-size: 14px;
		color: #666666;
		margin-bottom: 16rpx;
	}

	.comparison-image {
		width: 100%;
		height: 600rpx!important;
		border-radius: 8rpx;
	}

	.detail-section {
		background-color: #ffffff;
		border-radius: 0.75rem;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}

	.detail-item {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;
	}

	.detail-item:last-child {
		margin-bottom: 0;
	}

	.label {
		font-size: 14px;
		color: #666666;
	}

	.value {
		font-size: 14px;
		color: #333333;
	}

	.remark-section {
		background-color: #ffffff;
		border-radius: 0.75rem;
		padding: 30rpx;
	}

	.remark-title {
		display: block;
		font-size: 14px;
		color: #666666;
		margin-bottom: 16rpx;
	}

	.remark-content {
		font-size: 14px;
		color: #333333;
		line-height: 1.5;
	}
</style>